import React from 'react';
import { Layout as AntLayout, Menu } from 'antd';
import { Link, useLocation } from 'react-router-dom';
import { HomeOutlined, UserOutlined, FolderOutlined } from '@ant-design/icons';
import ThemeToggle from './ThemeToggle';

const { Header, Content, Footer } = AntLayout;

const Layout = ({ children, isDarkMode, setIsDarkMode }) => {
  const location = useLocation();

  const menuItems = [
    {
      key: '/home',
      icon: <HomeOutlined />,
      label: <Link to="/home">首页</Link>,
    },
    {
      key: '/archive',
      icon: <FolderOutlined />,
      label: <Link to="/archive">归档</Link>,
    },
    {
      key: '/about',
      icon: <UserOutlined />,
      label: <Link to="/about">关于</Link>,
    },
  ];

  return (
    <AntLayout className={`min-h-screen ${isDarkMode ? 'dark-theme' : 'light-theme'}`}>
      <Header className="header-wrapper">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-full">
          <Link to="/home" className="logo">
            戴码印记
          </Link>
          <div className="flex items-center">
            <Menu 
              mode="horizontal" 
              selectedKeys={[location.pathname.replace('/myBoke', '')]}
              items={menuItems}
              className="border-0 menu-custom"
            />
            <ThemeToggle isDarkMode={isDarkMode} setIsDarkMode={setIsDarkMode} />
          </div>
        </div>
      </Header>
      
      <Content className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 mt-16">
        {children}
      </Content>
      
      <Footer className="text-center">
        戴码印记 ©{new Date().getFullYear()} Created with React + Ant Design
      </Footer>
    </AntLayout>
  );
};

export default Layout; 